<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <head>
        <title>My Account</title>
        <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/bootstrap-3.2.0.min.css"/>
        <link rel="stylesheet" type="text/css" href="http://snipplicious.com/css/font-awesome-4.2.0.min.css"/>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <script src="http://snipplicious.com/js/jquery.js"></script>
        <script src="http://snipplicious.com/js/bootstrap.min.js"></script>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
    </head>
    <body>

        <ui:composition template="./master/MasterPage.xhtml">

            <ui:define name="content">
                <div class="container">
                    <ol class="breadcrumb">
                        <li class="active"><strong>Edit Profile</strong></li>
                    </ol>
                </div>
                <div class="container" style="padding-top: 60px;">
                    <div class="row">
                        <!-- left column -->
                        <div class="col-md-4 col-sm-6 col-xs-12">
                            <div class="text-center">
                                <ul>
                                    <li>
                                        <img src="image/images.jpg" class="avatar img-circle img-thumbnail" alt="avatar"/>
                                       
                                    </li>

                                </ul>
                            </div>
                            <div style="padding-left: 30px;">
                                <ul>
                                    <li>
                                        <i class="fa fa-user fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{login.fullname}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-calendar fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.birthdate}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-male fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.gender}</span>
                                    </li>
                                    <hr/>
                                    <li>
                                        <i class="fa fa-apple fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.possition}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-trophy fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.department}</span>
                                    </li>
                                    <li>
                                        <i class="fa fa-group fa-fw" style="font-size: 16px;padding-bottom: 15px;"></i><span style="padding-left: 25px;">#{employeeBean.group}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- edit form column -->
                        <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
                            <h3>Personal info</h3>
                            <h:form id="form1" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-lg-3 control-label"></label>
                                    <div class="col-lg-8">
                                        <span>#{employeeBean.msg}</span>  
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">Phone :</label>
                                    <div class="col-lg-8">
                                        <h:inputText id="txtPhone" class="form-control" value="#{employeeBean.phone}" required="true" requiredMessage="* Please enter Phone !" validatorMessage="* Please enter a vaid Phone!">
                                            <f:ajax event="blur" execute="@this" render="errorPhone"/>
                                            <f:validateRegex pattern="0\d{9,10}" />
                                        </h:inputText>
                                        <h:message id="errorPhone" for="txtPhone" style="color:red"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">Mobile Phone :</label>
                                    <div class="col-lg-8">
                                        <h:inputText id="txtMobilePhone" class="form-control" value="#{employeeBean.mobilePhone}" required="true" requiredMessage="Please enter MobilePhone" validatorMessage="*Please enter a valid MobilePhone!">
                                            <f:ajax event="blur" execute="@this"/>
                                            <f:validateRegex pattern="0\d{9,10}" />
                                        </h:inputText>
                                        <h:message for="txtMobilePhone" style="color:red"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-lg-3 control-label">Address :</label>
                                    <div class="col-lg-8">
                                        <h:inputText id="txtAddress" class="form-control" value="#{employeeBean.address}" size="100">
                                            <f:ajax event="blur" execute="@this"/>
                                        </h:inputText>
                                        <h:message for="txtAddress" style="color:red"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label"></label>
                                    <div style="display: inline-block;padding-left:10px;"><a style="cursor: pointer">Change Password</a></div>
                                    <div style="display: inline-block; padding-left: 180px;">
                                        <h:commandButton class="btn btn-primary" value="Save Changes" action="#{employeeBean.saveChangeProfile()}">
                                            <f:ajax render="@form" execute="@form"/>
                                        </h:commandButton>
                                        <span></span>
                                        <h:commandButton class="btn btn-default" value="Cancel" p:type="reset" action="#{employeeBean.cancel()}"/>
                                    </div>
                                </div>
                            </h:form>
                            <h:form id="form2" class="form-horizontal">
                                <div id="changePwd-group2">
                                    <div class="form-group">
                                        <label class="col-md-3 control-label"></label>
                                        <div class="col-md-8">
                                            <p id="error" style="color:red">#{employeeBean.msg}</p>
                                        </div>

                                        <label class="col-md-3 control-label">Password:</label>
                                        <div class="col-md-8">
                                            <h:inputSecret id="txtOldPassword" class="form-control" required="true" requiredMessage=" * Please enter Old Password!" value="#{employeeBean.password}">
                                                <f:ajax event="blur" execute="@this"/>
                                            </h:inputSecret>
                                            <h:message for="txtOldPassword" style="color:red" />
                                        </div>
                                    </div>
                                    <f:event listener="#{employeeBean.validatePassword}" type="postValidate" />
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">New password:</label>
                                        <div class="col-md-8">  
                                            <h:inputSecret id="txtNewPassword" class="form-control" required="true" requiredMessage=" * Please enter New Password !" value="#{employeeBean.newPassword}">
                                                <f:ajax event="blur" execute="@this"/>
                                            </h:inputSecret>
                                            <h:message for="txtNewPassword" style="color:red"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-3 control-label">Confirm password:</label>
                                        <div class="col-md-8">
                                            <h:inputSecret id="txtConfirmPassword" class="form-control" required="true" requiredMessage=" * Please enter Comfirm Password!">
                                                <f:ajax event="blur" execute="@this"/>
                                            </h:inputSecret>
                                            <h:message for="txtConfirmPassword" style="color:red"/>
                                        </div>
                                    </div>
                                    <div class="form-group" style="padding-left: 400px;">
                                        <label class="col-md-3 control-label"></label>
                                        <div class="col-md-8">
                                            <h:commandButton id="btnSaveChangePwd" class="btn btn-primary" value="Save Changes" action="#{employeeBean.changePassword()}">
                                                <f:ajax render="@form" execute="form2"/>
                                            </h:commandButton>
                                            <span></span>
                                            <h:commandButton id="btnResetPwd" class="btn btn-default" value="Cancel" p:type="reset" action="#{employeeBean.cancel()}">
                                                <f:ajax render="@form"/>
                                            </h:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </h:form>
                        </div>
                    </div>
                </div>
            </ui:define>

        </ui:composition>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("a").click(function() {
                    $("#changePwd-group2").slideToggle();
                });
                $("#form2\\:btnSaveChangePwd").click(function() {
                    $("#changePwd-group2").slideDown();
                });
            });
        </script>
    </body>
</html>
